<template>
  <div class="addCurMan">
    <van-nav-bar title="添加当班人员" left-arrow="" @click-left='goBack()'></van-nav-bar>
    <div class="note">
      <img src="../../assets/imgs/note.png" />
      <span>岗位成员之间请用空格隔开，每个岗位最多只能两人</span>
    </div>
    <!-- <div class="firstCell">
      <van-cell title="班次" required="">
        <div slot="default">
          <van-dropdown-menu :border="false" :hairline="false">
            <van-dropdown-item v-model="choiceCategory" :options="categorys" />
          </van-dropdown-menu>
        </div>
      </van-cell>
      <span class="errmsg" v-show="errmsg">{{errmsg}}</span>
    </div> -->
    <van-field @change='onBanciChange' :error-message="errmsg" label="班次" v-model="choiceCategory" placeholder="请输入班次" required="" :clearable="true"></van-field>
    <van-field label="组长" @input='oninputmaster' :error-message="masterErr" v-model="master" placeholder="请输入姓名" required="" :clearable="true"></van-field>
    <van-field label="胎基" v-model="taiji" placeholder="请输入胎基人员" :clearable="true"></van-field>
    <van-field label="开机" v-model="open" placeholder="请输入开机人员" :clearable="true"></van-field>
    <van-field label="看膜" v-model="look" placeholder="请输入看膜人员" :clearable="true"></van-field>
    <van-field label="收卷" v-model="shoujuan" placeholder="请输入收卷人员" :clearable="true"></van-field>
    <van-field label="标签" v-model="brand" placeholder="请输入标签人员" :clearable="true"></van-field>
    <van-field label="返工" v-model="back" placeholder="请输入返工人员" :clearable="true"></van-field>
    <van-field label="码垛" v-model="maduo" placeholder="请输入码垛人员" :clearable="true"></van-field>
    <div class="btn">
      <van-button color="#62cff9" type="default" size="large" @click="saveSuccess">保存</van-button>
    </div>
  </div>
</template>

<script>
  import {
    Toast
  } from 'vant'
  export default {
    data() {
      return {
        masterErr:'',
        errmsg:'',
        brand: '',
        open: '',
        look: '',
        maduo: '',
        back: '',
        shoujuan: '',
        taiji: '',
        master: '',
        choiceCategory: '',
        categorys: [{text:'白班',value:'白班'},
        {text:'晚班',value:'晚班'}]
      }
    },
    watch:{
      choiceCategory(newVal){

      }
    },

    methods: {
      oninputmaster(){
        if(/[^\u4e00-\u9fa5]/.test(this.master)){
          this.masterErr = '请输入中文字符'
        }else{
          this.masterErr = ''
        }
      },
      onBanciChange(){
        this.$axios.post('/Graders/getGraders.do',{gradersName:this.choiceCategory}).then(res=>{
          if(res.data.status === 200&&res.data.data){
            this.errmsg = '已存在'+this.choiceCategory+'当班信息，请勿重复添加'
          }else{
            this.errmsg = ''
          }
        })
      },
      saveSuccess() {
        if(this.errmsg||this.masterErr) return
        //对字符串扩展 多个空格变成一个空格
        String.prototype.ResetBlank = function() {
          var regEx = /\s+/g;
          return this.replace(regEx, ' ');
        };
       if (!this.master || !this.choiceCategory) {
          return Toast.fail({
            message: '请输入完整信息',
            addCurMan: 900
          })
        }
        console.log(this.look)

        if ((/[^\u4e00-\u9fa5\s]/g.test(this.look)) || (/[^\u4e00-\u9fa5\s]/g.test(this.back)) || (
            /[^\u4e00-\u9fa5\s]/g.test(
              this.maduo)) || (/[^\u4e00-\u9fa5\s]/g.test(this.shoujuan)) || (/[^\u4e00-\u9fa5\s]/g.test(this.open)) ||
          (/[^\u4e00-\u9fa5\s]/g.test(this.taiji)) || (/[^\u4e00-\u9fa5\s]/g.test(this.brand))) {
          return Toast.fail({
            message: '成员格式输入有误',
            duration: 900
          })
        }
        //返工
        let back = []
        back = this.back.trim().ResetBlank().split(' ')
        //标签
        let brand = []
        brand = this.brand.trim().ResetBlank().split(' ')
        //看膜
        let look = []
        look = this.look.trim().ResetBlank().split(' ')
        //开机
        let open = []
        open = this.open.trim().ResetBlank().split(' ')
        //码垛
        let maduo = []
        maduo = this.maduo.trim().ResetBlank().split(' ')
        //胎基
        let taiji = []
        taiji = this.taiji.trim().ResetBlank().split(' ')
        //收卷
        let shoujuan = []
        console.log(this.taiji)
        shoujuan = this.shoujuan.trim().ResetBlank().split(' ')
        if (back.length > 2 || open.length > 2 || brand.length > 2 || look.length > 2 || taiji.length > 2 || shoujuan.length >
          2 || maduo.length > 2) {
            console.log(taiji)
          return Toast.fail({
            message: '每个岗位成员最多两个',
            duration: 900
          })
        }
         let reg = /^.*[\,，].*$/;
        back = back.join(',')
        if(!reg.test(back)){
          back  = back + ','
        }
        open = open.join(',')
        if(!reg.test(open)){
          open  = open + ','
        }
        brand = brand.join(',')
        if(!reg.test(brand)){
          brand  = brand + ','
        }
        look = look.join(',')
        if(!reg.test(look)){
          look  = look + ','
        }
        taiji = taiji.join(',')
        if(!reg.test(taiji)){
          taiji  = taiji + ','
        }
        shoujuan = shoujuan.join(',')
        if(!reg.test(shoujuan)){
          shoujuan  = shoujuan + ','
        }
        maduo = maduo.join(',')
        if(!reg.test(maduo)){
          maduo  = maduo + ','
        }
        let data = [{
              "stationName": "组长",
              "userName": this.master
            },{
              "stationName": '胎基',
              "userName": taiji
            },{
              "stationName": '开机',
              "userName": open
            },{
              "stationName": '看膜',
              "userName": look
            },{
              "stationName": '收卷',
              "userName": shoujuan
            },{
              "stationName": '标签',
              "userName": brand
            },{
              "stationName": '返工',
              "userName": back
            },{
              "stationName": '码垛',
              "userName": maduo
            }]
        this.$axios.post('/Graders/addGraders.do',{"data":data,"gradersName":this.choiceCategory}).then(res => {
          if (res.data.status === 200) {
            Toast.success({
              message: '添加成功',
              duration: 900
            })
          } else if (res.data.status === 500) {
            Toast.fail({
              message: res.data.msg
            })
          }
        }).catch(err => {
          Toast.fail({
            message: '添加失败',
            duration: 900
          })
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .firstCell .errmsg{
    color: red;
    font-size: .7rem;
    margin-left: .7rem;
  }
  .note {
    padding: .5rem;
    margin-bottom: .7rem;
  }

  .note img {
    vertical-align: middle;
  }

  .note span {
    font-size: .76rem;
    color: #333333;
  }

  .van-dropdown-menu {
    height: 1.25rem;
    line-height: 1.25rem;
  }

  .firstCell .van-cell__title {
    flex: .35;
  }

  .van-button--large {
    height: 2.3rem;
    line-height: 2.3rem;
  }

  .btn {
    padding: 0.8rem;
  }
</style>
